<!DOCTYPE html>
<html>
<head>
    <style>
        /* 缩略图样式 */
        .thumbnail-container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 5px;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        .thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #999;
        }
        
        /* 大图模式样式 */
        #lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            justify-content: center;
            align-items: center;
            z-index: 1000;
            cursor: pointer;
        }
        #lightbox-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            transition: transform 0.1s;
            cursor: grab;
        }
        #lightbox img {
            max-width: 100%;
            max-height: 100%;
            display: block;
        }
        #lightbox-controls {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            background: rgba(0,0,0,0.5);
            padding: 5px 15px;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <input type="file" id="folderInput" webkitdirectory directory multiple>
    <div id="thumbnails" style="display: flex; flex-wrap: wrap;"></div>
    
    <!-- 大图模式 -->
    <div id="lightbox">
        <div id="lightbox-content">
            <img>
        </div>
        <div id="lightbox-controls">1/1000</div>
    </div>

    <script>
        // 图片数据管理
        let allImages = [];
        let currentIndex = 0;
        const CACHE_LIMIT = 2000;
        const activeThumbnails = new Map();
        
        // Intersection Observer 实现懒加载
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                const index = parseInt(entry.target.dataset.index);
                if (entry.isIntersecting) {
                    loadThumbnail(index);
                } else {
                    unloadThumbnail(index);
                }
            });
        }, { rootMargin: '200px 0px' });

        // 文件选择处理
        document.getElementById('folderInput').addEventListener('change', async (e) => {
            allImages = [...e.target.files].filter(f => f.type.startsWith('image/'));
            initThumbnailContainers();
            updateControlsText();
        });

        // 初始化缩略图容器
        function initThumbnailContainers() {
            const container = document.getElementById('thumbnails');
            container.innerHTML = allImages.map((_, i) => `
                <div class="thumbnail-container" data-index="${i}">
                    <div class="loading">Loading...</div>
                </div>
            `).join('');

            // 观察所有容器
            document.querySelectorAll('.thumbnail-container').forEach(container => {
                observer.observe(container);
            });
        }

        // 加载缩略图
        function loadThumbnail(index) {
            const container = document.querySelector(`.thumbnail-container[data-index="${index}"]`);
            if (!container || activeThumbnails.has(index)) return;

            const img = new Image();
            img.className = 'thumbnail';
            img.src = URL.createObjectURL(allImages[index]);
            
            img.onload = () => {
                container.querySelector('.loading')?.remove();
                container.appendChild(img);
                activeThumbnails.set(index, img.src);
                checkCacheLimit();
            };
        }

        // 卸载缩略图
        function unloadThumbnail(index) {
            const src = activeThumbnails.get(index);
            if (src) {
                URL.revokeObjectURL(src);
                activeThumbnails.delete(index);
                const container = document.querySelector(`.thumbnail-container[data-index="${index}"]`);
                if (container) {
                    container.innerHTML = '<div class="loading">Loading...</div>';
                }
            }
        }

        // 缓存数量检查
        function checkCacheLimit() {
            if (activeThumbnails.size > CACHE_LIMIT) {
                const keys = Array.from(activeThumbnails.keys())
                    .sort((a, b) => a - b)
                    .slice(0, Math.floor(CACHE_LIMIT * 0.1));
                
                keys.forEach(index => unloadThumbnail(index));
            }
        }

        // 大图模式相关变量
        let isDragging = false;
        let startX, startY;
        let translateX = 0, translateY = 0;
        let scale = 1;
        const lightboxContent = document.getElementById('lightbox-content');

        // 缩略图点击事件
        document.getElementById('thumbnails').addEventListener('click', (e) => {
            const container = e.target.closest('.thumbnail-container');
            if (container) {
                currentIndex = parseInt(container.dataset.index);
                resetImageState();
                showLightbox();
            }
        });

        // 显示大图
        function showLightbox() {
            const lightbox = document.getElementById('lightbox');
            lightbox.style.display = 'flex';
            lightbox.querySelector('img').src = URL.createObjectURL(allImages[currentIndex]);
            updateControlsText();
        }

        // 重置图片状态
        function resetImageState() {
            translateX = 0;
            translateY = 0;
            scale = 1;
            updateTransform();
        }

        // 更新变换
        function updateTransform() {
            lightboxContent.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
        }

        // 更新控制文本
        function updateControlsText() {
            document.getElementById('lightbox-controls').textContent = 
                `${currentIndex + 1}/${allImages.length}`;
        }

        // 大图模式事件监听
        document.getElementById('lightbox').addEventListener('click', (e) => {
            if (e.target.id === 'lightbox') {
                document.getElementById('lightbox').style.display = 'none';
            }
        });

        // 右键拖动功能
        lightboxContent.addEventListener('mousedown', (e) => {
            if (e.button === 2) { // 右键
                isDragging = true;
                startX = e.clientX - translateX;
                startY = e.clientY - translateY;
                lightboxContent.style.cursor = 'grabbing';
                e.preventDefault();
            }
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            translateX = e.clientX - startX;
            translateY = e.clientY - startY;
            updateTransform();
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
            lightboxContent.style.cursor = 'grab';
        });

        // 阻止右键菜单
        document.addEventListener('contextmenu', (e) => {
            if (document.getElementById('lightbox').style.display === 'flex') {
                e.preventDefault();
            }
        });

        // 滚轮缩放功能
        lightboxContent.addEventListener('wheel', (e) => {
            e.preventDefault();
            const delta = -Math.sign(e.deltaY);
            scale *= (1 + delta * 0.1);
            scale = Math.max(0.5, Math.min(scale, 3)); // 限制缩放范围
            
            // 调整位置使缩放中心在鼠标位置
            const rect = lightboxContent.getBoundingClientRect();
            const offsetX = e.clientX - rect.left;
            const offsetY = e.clientY - rect.top;
            
            translateX -= (offsetX - translateX) * (1 - 1/(1 + delta * 0.1));
            translateY -= (offsetY - translateY) * (1 - 1/(1 + delta * 0.1));
            
            updateTransform();
        });

        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (document.getElementById('lightbox').style.display !== 'flex') return;
            
            if (e.key === 'Escape') {
                document.getElementById('lightbox').style.display = 'none';
            } else if (e.key === 'ArrowLeft') {
                currentIndex = (currentIndex - 1 + allImages.length) % allImages.length;
                resetImageState();
                showLightbox();
            } else if (e.key === 'ArrowRight') {
                currentIndex = (currentIndex + 1) % allImages.length;
                resetImageState();
                showLightbox();
            }
        });

        // 清理资源
        window.addEventListener('beforeunload', () => {
            activeThumbnails.forEach((src, index) => {
                URL.revokeObjectURL(src);
            });
        });
    </script>
</body>
</html>